$theme-color: var(--themeColor);

view,
text,
input,
textarea {
	box-sizing: border-box;
	word-break: break-all;
	font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Segoe UI, Arial,
		PingFang SC, Hiragino Sans GB, Microsoft Yahei, STHeiti, SimSun, sans-serif;
}
image {
	will-change: transform;
	vertical-align: middle;
}
@mixin Flex {
	display: flex !important;
	justify-content: center;
	align-items: center;
}
.flexac {
	@include Flex;
}

.theme {
	&Color {
		color: $theme-color !important;
	}
	&Bg {
		background-color: $theme-color !important;
	}
}
.row {
	width: 100%;
	box-sizing: border-box !important;
	position: relative;
	display: flex !important;
	flex-direction: row;
	flex-wrap: wrap;
}
.rows {
	width: 100%;
	box-sizing: border-box !important;
	position: relative;
}
.width {
	width: 100%;
}
.height {
	height: 100%;
}
.nowrap {
	white-space: nowrap;
	overflow: hidden;
}
.p-re {
	position: relative;
}
.p-ab {
	position: absolute;
}
.white {
	color: #ffffff !important;
}
.black {
	color: #000000 !important;
}
.redbor {
	border: 1px solid red;
}
@mixin ellipsis {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	box-orient: vertical;
	-webkit-box-orient: vertical;
}
.ellipsis {
	&_1 {
		@include ellipsis;
		line-clamp: 1;
		-webkit-line-clamp: 1;
	}
	&_2 {
		@include ellipsis;
		line-clamp: 2;
		-webkit-line-clamp: 2;
	}
	&_3 {
		@include ellipsis;
		line-clamp: 3;
		-webkit-line-clamp: 3;
	}
}
.color {
	&-999 {
		color: #999999;
	}
	&-ccc {
		color: #cccccc !important;
	}
	&-333 {
		color: #333333;
	}
	&-222 {
		color: #222222;
	}
	&-e81 {
		color: #e81122;
	}
	&-666 {
		color: #666666;
	}
	&-ffb {
		color: #ffb048;
	}
}
.bg {
	&white {
		background-color: #ffffff;
	}
	&F2 {
		background-color: #f2f2f2;
	}
	&f4f5 {
		background-color: #f4f5f5 !important;
	}
}
.d-flex {
	display: flex !important;
	-webkit-display: flex;
}
.flex-0 {
	flex: 0;
	-webkit-flex: 0;
}
.flex-1 {
	flex: 1;
	-webkit-flex: 1;
}
.j-centert {
	justify-content: center;
	-webkit-justify-content: center;
}
.j-sb {
	justify-content: space-between;
	-webkit-justify-content: space-between;
}
.j-sa {
	justify-content: space-around;
	-webkit-justify-content: space-around;
}
.j-se {
	justify-content: space-evenly;
	-webkit-justify-content: space-evenly;
}

.j-start {
	justify-content: flex-start;
	-webkit-justify-content: flex-start;
}
.j-end {
	justify-content: flex-end;
	-webkit-justify-content: flex-end;
}
.j-self-start {
	margin-right: auto;
}
.j-self-end {
	margin-left: auto;
}
.j-self-column-end {
	margin-top: auto;
}
.a-center {
	align-items: center;
	-webkit-align-items: center;
}
.a-start {
	align-items: flex-start;
	-webkit-align-items: flex-start;
}
.a-end {
	align-items: flex-end;
	-webkit-align-items: flex-end;
}
.a-stretch {
	align-items: stretch;
	-webkit-align-items: stretch;
}
.f-column {
	flex-direction: column;
	-webkit-flex-direaction: column;
}
.auto {
	margin: 0 auto;
}
.text {
	&-center {
		text-align: center !important;
	}
	&-left {
		text-align: left;
	}
	&-right {
		text-align: right;
	}
	&-justify {
		text-align: justify;
	}
	&-justify-last {
		text-align-last: justify;
	}
}
.t-letter {
	&2 {
		letter-spacing: 2rpx;
	}
	&4 {
		letter-spacing: 4rpx;
	}
	&6 {
		letter-spacing: 6rpx;
	}
	&8 {
		letter-spacing: 8rpx;
	}
	&10 {
		letter-spacing: 10rpx;
	}
}

/* 文本中划线 */
.line-through {
	text-decoration: line-through;
}

/* 文本上划线 */
.overline {
	text-decoration: overline;
}

/* 文本下划线 */
.underline {
	text-decoration: underline;
}

.wh {
	width: 100%;
	height: 100%;
}

$font-sizes: 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42, 44, 46, 48, 50, 54, 60;

.size {
	@each $size in $font-sizes {
		&#{if($size == 20, '', $size)} {
			font-size: #{$size}rpx !important;
		}
	}
}

.bold {
	font-weight: bold !important;
	&400 {
		font-weight: 400 !important;
	}
	&500 {
		font-weight: 500 !important;
	}
	&600 {
		font-weight: 600 !important;
	}
	&700 {
		font-weight: 700 !important;
	}
	&800 {
		font-weight: 800 !important;
	}
}

$margin-Top: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 40, 46, 48, 50, 54, 60,
	100, 70, 80, 90;
@each $value in $margin-Top {
	.m-top#{$value} {
		margin-top: #{$value}rpx;
	}
}

$margin-Left: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 40, 46, 48, 50, 54, 60,
	70, 80, 90;

@each $value in $margin-Left {
	.m-left#{$value} {
		margin-left: #{$value}rpx;
	}
}

$margin-Right: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 40, 46, 48, 50, 54,
	60, 70, 80, 90;

@each $value in $margin-Right {
	.m-right#{$value} {
		margin-right: #{$value}rpx;
	}
}

$margin-Bot: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 40, 46, 48, 50, 54, 60,
	70, 80, 90;

@each $value in $margin-Bot {
	.m-bot#{$value} {
		margin-bottom: #{$value}rpx;
	}
}

$margin-values: 4, 6, 8, 10, 20, 30, 40;

@each $value in $margin-values {
	.margin#{$value} {
		margin: #{$value}rpx auto;
	}
}

$padding-Left: 4, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 35, 40, 42, 44, 46, 50, 60,
	70, 80, 90, 100;

@each $value in $padding-Left {
	.p-left#{$value} {
		padding-left: #{$value}rpx;
	}
}

$padding-Right: 4, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 35, 40, 42, 44, 46, 50, 60,
	70, 80, 90, 100;

@each $value in $padding-Right {
	.p-right#{$value} {
		padding-right: #{$value}rpx;
	}
}

$padding-Top: 4, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 35, 40, 42, 44, 46, 50, 60,
	70, 80, 90, 100;

@each $value in $padding-Top {
	.p-top#{$value} {
		padding-top: #{$value}rpx;
	}
}

$padding-Bot: 4, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 26, 28, 30, 35, 40, 42, 44, 46, 50, 60,
	70, 80, 90, 100;

@each $value in $padding-Bot {
	.p-bot#{$value} {
		padding-bottom: #{$value}rpx;
	}
}

$padding-values: 4, 6, 8, 10, 12, 14, 15, 16, 18, 20, 22, 24, 30;

@each $value in $padding-values {
	.padding#{$value} {
		padding: #{$value}rpx;
	}
}

.line {
	&40 {
		line-height: 40rpx;
	}
	&66 {
		line-height: 66rpx;
	}
}
